<template>
	<view class="content">
		<!-- 背景一 -->
		<view class="bg"></view>
		<!-- 背景二 -->
		<view class="bg2"></view>
		<!-- 注册提示 -->
		<view class="tips">
			<text class="title">注册</text>
			<text class="subtitle">欢迎来到悟空商城~</text>
		</view>
		<!-- 注册view -->
		<view class="form-box">
			<!-- 用户昵称 -->
			<view class="input-box">
				<image class="left" src="/static/login/zhanghao.png">
				</image>
				<input v-model="user.nickName" placeholder="请输入用户昵称" />
				<image class="right" src="">
				</image>
			</view>
			<!-- 用户手机号 -->
			<view class="input-box">
				<image class="left" src="/static/login/shouji.png">
				</image>
				<input @blur="phoneSchema" v-model="user.phone" maxlength="11" placeholder="请输入手机号" />
				<image class="right" src="">
				</image>
			</view>
			<!-- 验证码 -->
			<view class="input-box">
				<image class="left" src="/static/login/yanzhengma.png">
				</image>
				<input v-model="user.code" maxlength="6" placeholder="请输入验证码" />
				<!-- 验证码登录按钮 -->
				<view class="code" @click="sendRegCode">
					{{getCode=="1"?'获取验证码': getCode==2?"获取验证码":changeCode+'s后可重发' }}
				</view>
				<image class="right" src="">
				</image>
			</view>
			<!-- 用户密码 -->
			<view class="input-box">
				<image class="left" src="/static/login/mima.png">
				</image>
				<input @blur="pwdSchema" v-model="user.passStr" maxlength="16" placeholder="请输入密码" />
				<image class="right" src="">
				</image>
			</view>
			<view class="btn" @click="register">注册</view>
			<view class="other">
				<text>找回密码</text>
				<text style="color:#00c6fc;" @click="getLogin">快速登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入api文件
	import api from "../../../api/api.js";
	export default {
		data() {
			return {
				// 注册用户对象
				user: {
					nickName: "", // 用户昵称
					phone: "", // 手机号
					code: "", // 验证码
					passStr: "", // 密码
				},
				getCode: "1", // 控制文字显示隐藏
				changeCode: 60, // 倒计时时间
				changeCodeFlag: false, // 节流值
			}
		},
		methods: {
			// 跳转登录页面
			getLogin() {
				uni.navigateTo({
					url: "/pages/user/login/login",
				})
			},

			// 验证手机号
			phoneSchema() {
				const regPhone = /^1[3456789]\d{9}$/; // 手机正则
				// 验证手机号
				if (!regPhone.test(this.user.phone)) {
					return false;
				}
				return true;
			},

			pwdSchema() {
				const regPwd = /^[a-z0-9]{6,16}$/; // 密码正则
				// 验证密码
				if (!regPwd.test(this.user.passStr)) {
					console.log("密码格式错误！");
					return false;
				}
				return true;
			},

			// 倒计时函数
			countTime() {
				if (this.changeCodeFlag) return // 默认值false 第一次不return
				// 调用api
				this.apiRegCode();
				// 改为true 计时不结束一直return
				this.changeCodeFlag = true;
				this.getCode = "3";
				// 定义定时器 方便清除
				let timer = setInterval(() => {
					// 倒计时数字 每秒自减1 
					this.changeCode--;
					// 每次自减一 再赋值给它本身
					this.changeCode = this.changeCode;
					// 判断 显示为0s时 结束定时器 将'重新获取'显示出来 将节流值改为false 将倒计时复原
					if (this.changeCode === -1) {
						clearInterval(timer);
						this.getCode = "2";
						this.changeCode = 60;
						this.changeCodeFlag = false;
					}
				}, 1000);
			},

			// 发验证码
			apiRegCode() {
				// 发送注册验证码
				api.getRegisterCode(this.user.phone).then(res => {
					// 发送失败
					if (res.data.status != 200) return uni.$showMsg(res.data.data.err);
					// 发送成功
					uni.$showMsg(res.data.msg);
				})
			},

			// 发送注册验证码
			sendRegCode() {
				// 启动按钮倒计时
				this.countTime();
			},

			// 注册函数
			register() {
				// 判断输入的密码和手机号是否正确
				if (this.phoneSchema() && this.pwdSchema()) {
					// 调用注册接口
					api.register(this.user).then(res => {
						// 注册失败
						if (res.data.status != 200) return uni.$showMsg(res.data.msg);
						// 注册成功
						uni.$showMsg(res.data.msg);
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/user/login/login",
							})
						}, 1800);

					});
				}
			},
		},
		onLoad() {
			// 设置注册页面title
			uni.setNavigationBarTitle({
				title: "注册-悟空商城"
			})
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #ffffff;

		// 注册提示
		.tips {
			padding-top: 200rpx;
			padding-left: 80rpx;
			display: flex;
			flex-direction: column;

			.title {
				line-height: 70rpx;
				font-weight: bold;
				font-size: 50rpx;
			}

			.subtitle {
				line-height: 70rpx;
				font-size: 35rpx;
				font-weight: bold;
				color: #b0b0b1;
			}

		}

		// 背景一
		.bg {
			position: fixed;
			top: -250rpx;
			right: -250rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #00baef;
			z-index: 2
		}

		// 背景二
		.bg2 {
			position: fixed;
			top: -150rpx;
			right: -300rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #ade8f9;
			z-index: 1;
		}

		// 注册提示
		.form-box {
			padding-top: 100rpx;
			padding-left: 70rpx;
			width: 610rpx;

			.input-box {
				margin: 40rpx 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100rpx;
				background-color: #f5f5f5;
				border-radius: 100rpx;
				width: 100%;

				input {
					flex: 1;
					height: 100%;
					font-size: 13px;
				}

				.left {
					padding: 0 30rpx;
					width: 35rpx;
					height: 35rpx;
				}

				.right {
					padding: 0 30rpx;
					width: 40rpx;
					height: 40rpx;
				}

				// 验证码登录按钮
				.code {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fe8d85;
					font-size: 26rpx;
				}
			}

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100rpx;
				border-radius: 100rpx;
				color: #FFFFFF;
				background: linear-gradient(to right, #00c6fc, #9adcf1);
			}

			.other {
				display: flex;
				justify-content: space-between;

				text {
					line-height: 80rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>